<template>
    <view class="uni-container-fillOrder">
        <div class="border" :style='getTitleTop'></div>
        <div class='o-header'>
            <h3>{{oderInfo.title}}</h3>
            <div class="o-price-detail">
                <span class="o-p-d">¥
                    <span class="price">{{isVIP?oderInfo.vipPrice:oderInfo.price}}</span>
                    <span class="per">/人</span>
                </span>
                <span class='cale-buy-vipPrice' v-if="!isVIP">会员价¥{{oderInfo.vipPrice}}</span>
                <span class='cale-buy-vip' v-if="isVIP">
                    <span class="vip-icon">会员价</span>
                    <span class="original-price">原价¥{{oderInfo.price}}</span>
                </span>
            </div>
        </div>
        <div class='o-travel-dates'>
            <span class='o-t-label'>出行日期</span>
            <span class='o-t-content'>{{oderInfo.showMerchEffectDate}}</span>
            <span class='o-t-label'>出游人数</span>
            <span class='o-t-content'>成人*{{oderInfo.merchNum}}</span>
        </div>
        <VIPCard></VIPCard>
        <div class="gray"></div>

        <ul class="o-input-info">
            <li>
                <span class='o-t-label'>联系人</span>
                <input type="text" v-model.trim="contactInfo.contactName" maxlength="10"  class="personName" placeholder="请输入联系人的姓名" />
            </li>
            <li>
                <span class='o-t-label'>手机号</span>
                <input  
                    class="e-input" 
                    maxlength="11" 
                    v-model.trim="contactInfo.contactPhone"
                    type="number"
                />
            </li>
            <div class="gray"></div>
            <li>
                <span class='o-t-label'>出游人</span>
                <span class="addPeople" @tap='addPeople'>添加出游人</span>
            </li>
            <li v-for="(item,index) in tourists" :key="index">
                <span class='o-t-label'>出游人{{index+1}}</span>
                <span class="tour-name">{{item.name}}</span>
                <span class="tour-phone">{{item.mobile}}</span>
            </li>
        </ul>
        <!-- <div class="o-rules" @tap.stop="changeFlag" :style="getBottomX">
            <img src="http://cdn.yueyangshuyuan.com/check.png"  v-if="!checkSure" />
            <img src="http://cdn.yueyangshuyuan.com/checkOn.png" v-else />
            <span>我已阅读并同意</span>
            <span class="rules-d" @tap.stop='toService'>《阅阳会员服务协议》</span>
        </div> -->
        <div class='cale-footer'>
            <span class='cale-select-info'>订单金额：<span class="o-p-d">¥<span class="price">{{!isVIP?oderInfo.orderPay:oderInfo.vipOrderPay}}</span></span>
                <span class="price-detail fr" @tap="(showPopUp = true,this.isOrdering = false)">价格明细</span>
            </span>
            
            <span class='cale-next-btn' @tap='fillOrder'>{{btnCon}}</span>
        </div>
        <div class="mask" v-if="showPopUp" @tap='showPopUp=false'></div>
        <div class="popUp" v-if="showPopUp">
            <div  class="popUp-detail">
                 <h3>价格明细</h3>
                <div v-if="isVIP" class="isVip">
                    <div>¥{{oderInfo.vipPrice}}/人 * {{oderInfo.merchNum}}人 </div>
                    <p>商品原价为¥{{oderInfo.price}}/人, 会员折扣已优惠 <span>{{(oderInfo.price-oderInfo.vipPrice)*oderInfo.merchNum}}元</span></p>
                </div>
                <div v-else class="notVIp">¥{{oderInfo.price}}/人 * {{oderInfo.merchNum}}人 </div>
            </div>
        </div>
        <div class="mask" v-if="isOrdering" @tap='isOrdering=false'></div>
        <div class="popUp"  v-if="isOrdering" >
             <div class="popUp-order">
                <p class="pop-tips">下单成功，此订单需在<span> {{countTimer}} </span>内支付完成 <img src="https://cdn.yueyangshuyuan.com/close.png" alt="" class="close fr" @tap='payTips=true'></p>
                <div class="wx-pay clearfix">
                    <img src="https://cdn.yueyangshuyuan.com/weixin.png" alt="" class="pay-logo fl">
                    <h3 class="fl">微信支付</h3>
                    <img src="https://cdn.yueyangshuyuan.com/%E5%88%86%E7%BB%84%202.png" alt="" class="pay-icon fr checked">
                    <!-- <img src="https://cdn.yueyangshuyuan.com/%E6%9C%AA%E9%80%89%E4%B8%AD.png" alt="" class="pay-icon fr uncheck"> -->
                </div>
            </div>
        </div>
        <div class="payMask" @tap='payTips=false' v-if="payTips"></div>
        <div class="pay-dialog" v-if="payTips">
            <h3 class="title">温馨提示</h3>
            <p class="pay-tips">订单尚未完成，你可以稍厚在待付款订单中完成支付，超时未完成支付的订单，将被自动取消</p>
            <div class="pay-btn">
                <span class="after-pay" @tap='ToOrderList'>稍后支付</span>
                <span class="continue-pay" @tap='ContinuePay'>继续支付</span>
            </div>
        </div>
    </view>
</template>
<script>
import {mapState,mapMutations} from 'vuex';
import VIPCard from '../../components/vipCard';
import * as util from '../../util.js';
export default {
    computed: {
        ...mapState(['hasLogin', 'isVIP','oderInfo','telPhone','merchInfoForOrder','phoneData',"PeopleCheckList","orderFillInfo"]),
        getBottomX(){
            if(this.isPlat == 3){
                // return 'margin-bottom:100px';
            }
        },
        getTitleTop(){
            if(this.isPlat == 3){
                return 'padding-top:54px';
            }else if(this.isPlat == 2){
                return 'padding-top:32px';
            }else if(this.isPlat == 1){
                return 'padding-top:32px';
            }
        }
    },
    components: {
        VIPCard,
    },
    data(){
        return{
            isPlat:-1,
            btnCon:'提交订单',
            checkSure:false,
            showPopUp:false,//价格明细浮框
            isOrdering:false,//支付浮框
            payTips:false,//支付提示
            countTimer:'59分59秒',
            contactInfo:{
                contactName:'',
                contactPhone:0,
            },
            orderDto:{//下订单接口参数
                // sales:1,
                touristIds:[],
                type:1,
            },
            tourists:[],
            timer:null,
            preDataId:0,
        }
    },
    mounted() {
       
    },
    onLoad(options){

    },
    onUnload(){
        clearInterval(this.timer)
    },
    onShow() {
        this.contactInfo.contactPhone = this.telPhone;
        this.orderDto.touristIds = [];
        this.tourists = this.PeopleCheckList;
        this.tourists.forEach(ele => {
            this.orderDto.touristIds.push(ele.id);
        });
        if(this.orderFillInfo){
            this.contactInfo = this.orderFillInfo;
            this.setOrderFillInfo();
        }
    },
    onHide:() =>{
        clearInterval(this.timer)
    },
    methods: {
        ...mapMutations(['getPhoneType','setOrderFillInfo','setPeopleCheckList']),
        init(){
            this.getPhoneType();
            if (this.phoneData.model.indexOf('iPhone') !== -1) {//ios
                if(this.phoneData.screenHeight >= 812){//x
                    this.isPlat = 3;
                }else{
                    this.isPlat = 2;
                }
            } else {//安卓
                this.isPlat = 1;
            }
        },
        toService(){//预览服务协议
            uni.navigateTo({
                url: '/pages/serviceAgreement/serviceAgreement'
            });
        },
        addPeople(){//添加出游人
            this.setOrderFillInfo(this.contactInfo);
            uni.navigateTo({
                url: '/pages/peopleList/peopleList?num='+this.oderInfo.merchNum+"&tourists="+JSON.stringify(this.tourists)
            });
        },
        ToOrderList(){//我的订单待付款
            uni.navigateTo({
                url: '/pages/myOrderLIst/myOrderLIst?type=1'
            });
        },
        ContinuePay(){//继续支付
            this.payTips = true;
            this.requestPayment();
        },
        changeFlag(){
            this.checkSure=!this.checkSure;
        },
        async fillOrder(){
            if(this.btnCon == '提交订单'){//下单
                if(this.contactInfo.contactName == ''){
                    uni.showToast({
                        icon: 'none',
                        title: '请填写联系人 '
                    });
                    return;
                }
                let reg = /^1[3-9][0-9]{9}$/;
                if(this.contactInfo.contactPhone == '' || !reg.test(this.contactInfo.contactPhone)){
                    uni.showToast({
                        icon: 'none',
                        title: '请正确填写联系人手机号'
                    });
                    return;
                }
                console.log(this.oderInfo.merchNum)
                console.log(this.orderDto.touristIds.length)
                if(this.oderInfo.merchNum !== this.orderDto.touristIds.length){
                    uni.showToast({
                        icon: 'none',
                        title: '请核对出游人数'
                    });
                    return;
                }
                // if(!this.checkSure){
                //     uni.showToast({
                //         icon: 'none',
                //         title: '请阅读并勾选订单协议',
                //     });
                //     return;
                // };
                let inventoryInfo = await this.checkInventory();
                if(!inventoryInfo){//false库存不足
                    uni.showToast({
                        icon: 'none',
                        title: '库存不足，请返回重新选择',
                    });
                    return;
                }
                this.orderDto = Object.assign(this.orderDto,this.oderInfo,this.contactInfo);
                uni.showLoading({  
                    title: '下单中...'  
                });
                this.$api.PostOrder({
                   ...this.orderDto
                }).then((json)=>{
                    if(json.code != -1){
                        //下单成功执行
                        if(!this.isOrdering){
                            this.preDataId = json.data;
                            this.countDownFun(json.data);
                        }
                    }else{
                        uni.hideLoading(); 
                        uni.showToast({
                            icon: 'none',
                            title: json.message,
                        });
                    }
                })
            }else{//支付
                //支付回调函数
                this.requestPayment();
            }
        },
        checkInventory(){
            return new Promise((res)=>{
                this.$api.checkInventory({
                    merchId:this.oderInfo.merchId,
                    count:this.oderInfo.merchNum,
                    merchEffectDate:this.oderInfo.merchEffectDate
                }).then(json=>{
                    res(json)
                });
            });
        },
        ToOrderDetail(id){//去订单详情--订单id
            uni.navigateTo({
                url: '/pages/orderDetail/orderDetail?orderId='+id
            });
        },
        orderResult(){//支付成功通知后端更改订单状态
            this.$api.orderResult({
                id:this.preDataId
            }).then(()=>{
                this.ToOrderDetail(this.preDataId);
            })
        },
        async requestPayment(){
            let orderInfo = await this.getOrderInfo();
            console.log(orderInfo ,'orderInfo')
            if(orderInfo.code == -1) {
                uni.showModal({
                    content: orderInfo.message,
                    showCancel: false,
                    success: (res)=> {
                        this.ToOrderDetail(this.preDataId);
                    }
                })
                return;
            }
            
            orderInfo.data.package = orderInfo.data.packageValue
            uni.requestPayment({
                provider: 'wxpay',
                ...orderInfo.data,
                success: (e) => {
                    console.log("success", e);
                    uni.showToast({
                        title: "支付成功!",
                        icon: 'none',
                    });
                    this.orderResult();
                   
                },
                fail: (e) => {
                    console.log("fail", e);
                    if(e.errMsg == "requestPayment:fail cancel"){//商户取消
                        this.payTips = true;
                    }else{
                        uni.showModal({
                            content: "支付失败!",
                            showCancel: false
                        })
                    }
                },
                complete: () => {
                    // this.providerList[index].loading = false;
                }
            })
        },
        getOrderInfo() {
            return new Promise((res,rej) => {
                this.$api.orderDetail({
                    id:this.preDataId
                }).then(json=>{
                    if(json.status == 40){//已取消
                        uni.showToast({
                            title: "因超时未支付，订单已取消",
                            icon: 'none',
                        });
                        setTimeout(()=>{
                            this.ToOrderDetail(this.preDataId);
                        },1000)
                    }else if(json.status == 10){//待支付
                        this.$api.orderPrepay({
                            orderId:this.preDataId,
                            appType:1
                        }).then(json=>{
                            res(json);
                        })
                    }else{
                        uni.showToast({
                            title: "订单已支付",
                            icon: 'none',
                        });
                        setTimeout(()=>{
                            this.ToOrderDetail(this.preDataId);
                        },1000)
                    }
                })
            });
        },
        countDownFun(orderId){//倒计时
            let m,s,count = 60*60-1,payEndTime;//60分钟
            this.$api.orderDetail({
                id:orderId
            }).then(json=>{
                uni.hideLoading(); 
                payEndTime = json.payEndTime/1000-1;
                this.btnCon = '立即支付'
                this.showPopUp = false;
                this.isOrdering = true;
            });
            this.timer = setInterval(()=>{
                if(payEndTime){
                    count = (payEndTime - Date.parse(new Date())/1000);
                }
                m = util.getMinSec(count).m;
                s = util.getMinSec(count).s;
                this.countTimer = `${m}分${s}秒`;
                if(count<0){
                    clearInterval(this.timer);
                }
            },1000);
        },
    },
}
</script>
<style lang='scss'>
    .fl {
		float: left;
		display: inline;
	}
	.fr {
		float: right;
		display: inline;
	}
	.clearfix:after {
		clear: both;
		content: ".";
		display: block;
		font-size: 0;
		height: 0;
		line-height: 0;
		visibility: hidden;
	}
	.clearfix {
		clear: both;
		zoom: 1;
    }
    .Ellipsis{
        overflow:hidden;
        white-space:nowrap;
        text-overflow:ellipsis;
    }
    .gray{
        background: #FAFAFA;
        height:20upx;
    }
    .mask{
        position: fixed;
        bottom: 0px;
        top: 0px;
        left: 0px;
        right: 0px;
        background-color: rgba(0, 0, 0, 0.4);
        transition-duration: 0.3s;
        z-index: 99;
    }
    .payMask{
        position: fixed;
        bottom: 0px;
        top: 0px;
        left: 0px;
        right: 0px;
        background-color: rgba(0, 0, 0, 0.4);
        transition-duration: 0.3s;
        z-index: 110;
    }
    .border{
        width: 100%;
        height: 1px;
        background:#DDDDDD ;
        position: fixed;
        top: 0;
        left: 0;
        z-index:1000;
        // border-top: 1px solid #DDDDDD;
    }
    .uni-container-fillOrder{
        overflow-x: hidden;
        margin-bottom: 160rpx;
        .o-header{
            
            border-bottom: 1px solid #DDDDDD;
            padding: 20upx 24upx 16upx;
            color: #777777;
            h3{
                font-size: 32upx;
                color: #262626;
                font-weight: bold;
                padding-bottom: 15upx;
            }
            .o-p-d{
                font-size: 30upx;
                color: #E65126;
                font-weight: bold;
                .price{
                    font-size: 36upx;
                    margin-left: 2px;
                }
                .per{
                    font-size: 20upx;
                    color: #777777;
                    font-weight: normal;
                    margin-left: 8rpx;
                }
            }
            .cale-buy-vipPrice{
                margin-left: 16upx;
                padding: 4upx 10upx;
                font-size: 20upx;
                color: #FFFFFF;
                background: #F5A623;
                border-radius: 4upx;
                position: relative;
                top: -1rpx;
            }
            .cale-buy-vip{
                margin-left: 16upx;
                .vip-icon{
                    width: 92upx;
                    height: 36upx;
                    background: #F5A623;
                    border-radius: 4rpx;
                    line-height: 36upx;
                    text-align: center;
                    font-size: 20upx;
                    color: #FFFFFF;
                    display: inline-block;
                    position: relative;
                    top: -1rpx;
                    letter-spacing: 4rpx;
                }  
                .original-price{
                    margin-left: 22upx;
                    font-size: 20upx;
                    color: #777777;
                    text-decoration: line-through;
                }
            }
        }
        .o-travel-dates{
            padding: 32upx 0;
            padding-left: 36upx;
            font-size: 28upx;
            color: #fff;
            span{
                display: inline-block;
            }
            .o-t-label{
                color: #262626;
                width: 134upx;
                text-align: left;
            }
            .o-t-content{
                color: #777777;
                &:nth-of-type(2){
                    margin-right: 70upx;
               }
            }
        }  
        .o-input-info{
            
            li{
                border-bottom: 2upx solid #E2E6EE;
                display: flex;
                padding-left: 36upx;
                .o-t-label{
                    display: inline-block;
                    font-size: 28upx;
                    color: #262626;
                    width: 134upx;
                    height: 84upx;
                    line-height: 84upx;
                    padding: 32upx 0;
                }
                input{
                    color: #777777;
                    font-size: 28upx;
                    width: 500upx;
                    height: 84upx;
                    line-height: 84upx;
                    padding: 32upx 0;
                }
                span{
                    display: inline-block;
                    font-size: 28upx;
                    color: #262626;
                    height: 84upx;
                    line-height: 84upx;
                    padding: 32upx 0;
                }
                .tour-name{
                    margin-right: 30rpx;
                }
                .addPeople{
                    color: #3D84FF;
                }
                
                &:nth-of-type(2){
                    border-bottom:none;
                }
            }
        }
        .o-rules{
            margin-bottom: 160rpx;
            font-size: 28upx;
            color: #777777; 
            margin-left: 36upx;
            margin-top: 32upx;
            img {
                float:left;
                width:32upx;
                height:32upx;
                margin-top:5upx;
                margin-right: 20upx;
            }
            .rules-d{
               color: #3D84FF;
               margin-left: 12upx;
            }
        }
        .cale-footer{
            width: 100%;
            height: 108upx;
            position:fixed;
            bottom: 0;
            z-index: 101;
            .cale-select-info{
                display: inline-block;
                font-size: 28upx;
                color: #262626;
                background: #FFFFFF;
                box-shadow: 0 -10upx 16upx 0 rgba(164,164,164,0.20);
                width: calc(100% - 344upx);
                height: 108upx;
                line-height: 108upx;
                padding-left: 24upx;
                .o-p-d{
                    font-size: 30upx;
                    color: #E65126;
                    .price{
                        font-size: 36upx;
                    }
                }
               
                .price-detail{
                    font-size: 24upx;
                    color: #777777;
                    margin-right: 22upx;
                    text-decoration: underline;
                }
            }
            
            .cale-next-btn{
                display: inline-block;
                background: #E25422;
                font-size: 32upx;
                color: #FFFFFF;
                width: 320upx;
                height: 108upx;
                line-height: 108upx;
                text-align: center;
            }
        }
        .popUp{
            width: 100%;
            position: fixed;
            bottom: 107upx;
            z-index: 100;
            left: 0;
            padding: 24upx;
            box-sizing: border-box;
            padding-top: 26upx;
            padding-bottom: 26upx;
            background: #fff;
            .popUp-detail{
                h3{
                    font-size: 28upx;
                    color: #262626;
                    margin-bottom: 26upx;
                }
                .isVip,.notVIp{
                    font-size: 32upx;
                    color: #262626;
                    font-weight: bold;
                }
                p{
                    font-size: 24upx;
                    color: #777777;
                    margin-top: 14upx;
                    font-weight: normal;
                    >span{
                        color: #E65126;
                        margin-left: 10upx;
                    }
                }
            }
            .popUp-order{
                .pop-tips{
                    font-size: 28upx;
                    color: #262626;
                    font-weight: normal;
                    span{
                        color: #E65126;
                    }
                    .close{
                        width: 24upx;
                        height: 24upx;
                    }
                }
                .wx-pay{
                    padding-top: 46upx;
                    .pay-logo{
                        width: 54upx;
                        height: 54upx;
                    }
                    h3{
                        font-size: 32upx;
                        color: #262626;
                        line-height: 54rpx;
                        padding-left: 16rpx;
                    }
                    .pay-icon{
                        width: 44upx;
                        height: 44upx;
                        margin-top: 5rpx;
                    }
                }
            }
           
        }
        .pay-dialog{
            width: 560upx;
            // height: 310upx;
            background: #FFFFFF;
            border-radius: 24upx;
            position: fixed;
            z-index: 111;
            left: 50%;
            top: 50%;
            transform: translate(-50%,-50%);
            padding-top: 50upx;
            .title{
                font-size: 32upx;
                color: #030303;
                font-weight: bold;
                text-align: center;
                margin-bottom: 22upx;
            }
            .pay-tips{
                padding: 0 50upx;
                font-size: 28upx;
                color: #555555;
                font-weight: 500;
                margin-bottom: 36upx;
            }
            .pay-btn{
                border-top: 1px solid #D8D8D8;
                display: flex;
                span{
                    display: block;
                    font-size: 36upx;
                    height: 90upx;
                    line-height: 90upx;
                    width: 49%;
                    text-align: center;

                }
                .after-pay{
                    color: #333333;
                    border-right: 1px solid #CFCFCF;
                }
                .continue-pay{
                    color: #3D84FF;
                }
            }
        }


    }
    
</style>
